<template>
  <div class="about">
    <!-- 顶部静态图片 -->
    <div class="static-banner" v-if="carouselData.length > 0">
      <div class="banner-item">
        <img :src="carouselData[0].image" alt="banner" class="banner-img" />
        <div class="banner-overlay">
          <div class="container">
            <div class="banner-content">
              <h1 class="banner-title">{{ carouselData[0].title }}</h1>
              <p class="banner-subtitle" v-if="carouselData[0].subtitle">
                {{ carouselData[0].subtitle }}
              </p>
              <p class="banner-description" v-if="carouselData[0].description">
                {{ carouselData[0].description }}
              </p>
              <el-button
                v-if="carouselData[0].buttonText"
                type="primary"
                size="large"
                @click="handleCarouselAction(carouselData[0].action)"
              >
                {{ carouselData[0].buttonText }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页面标题（当没有轮播图时显示） -->
    <div class="page-header" v-else>
      <div class="container">
        <h1 class="page-title">{{ pageTitle || "关于我们" }}</h1>
        <p class="page-subtitle">
          {{
            pageSubtitle || "了解FAIR plus机器人全产业链接会的背景和发展历程"
          }}
        </p>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a
            @click="setActiveTab('exhibition-intro')"
            :class="['nav-item', { active: activeTab === 'exhibition-intro' }]"
            v-if="introDescription1"
            >展会介绍</a
          >
          <a
            @click="setActiveTab('organizer-intro')"
            :class="['nav-item', { active: activeTab === 'organizer-intro' }]"
            v-if="organizerDescription"
            >主办方介绍</a
          >
          <a
            @click="setActiveTab('exhibition-highlights')"
            :class="[
              'nav-item',
              { active: activeTab === 'exhibition-highlights' },
            ]"
            v-if="exhibitionHighlights.length > 0"
            >展会集锦</a
          >
          <a
            @click="setActiveTab('venue-intro')"
            :class="['nav-item', { active: activeTab === 'venue-intro' }]"
            v-if="venueDescription"
            >展馆介绍</a
          >
          <a
            @click="setActiveTab('past-exhibitions')"
            :class="['nav-item', { active: activeTab === 'past-exhibitions' }]"
            v-if="pastExhibitions.length > 0"
            >往届展会</a
          >
          <a
            @click="setActiveTab('organization-structure')"
            :class="[
              'nav-item',
              { active: activeTab === 'organization-structure' },
            ]"
            v-if="organizationStructure.length > 0"
            >组织架构</a
          >
          <a
            @click="setActiveTab('product-scope')"
            :class="['nav-item', { active: activeTab === 'product-scope' }]"
            v-if="productScope.length > 0"
            >展品范围</a
          >
        </nav>
      </div>
    </div>

    <div class="container">
      <!-- 展会介绍 -->
      <section
        id="exhibition-intro"
        class="about-section"
        v-if="introDescription1 && activeTab === 'exhibition-intro'"
      >
        <h2 class="section-title">
          {{ sectionTitleExhibitionIntro || "展会介绍" }}
        </h2>
        <div class="intro-content">
          <div class="intro-image"></div>
          <div class="intro-text">
            <div v-if="introDescription1" v-html="introDescription1"></div>
          </div>
        </div>
      </section>

      <!-- 主办方介绍 -->
      <section
        id="organizer-intro"
        class="about-section"
        v-if="organizerDescription && activeTab === 'organizer-intro'"
      >
        <h2 class="section-title">
          {{ sectionTitleOrganizer || "主办方介绍" }}
        </h2>
        <div class="organizer-content">
          <div class="organizer-info">
            <div
              v-if="organizerDescription"
              v-html="organizerDescription"
            ></div>
          </div>
        </div>
      </section>

      <!-- 展会集锦 -->
      <section
        id="exhibition-highlights"
        class="about-section"
        v-if="
          exhibitionHighlights.length > 0 &&
          activeTab === 'exhibition-highlights'
        "
      >
        <h2 class="section-title">
          {{ sectionTitleHighlights || "展会集锦" }}
        </h2>
        <div class="highlights-content">
          <!-- 头图+文本（第一条） -->
          <div v-if="primaryHighlight" class="highlight-item primary">
            <div
              class="highlight-image"
              :class="{ 'full-image': !hasDesc(primaryHighlight) }"
              v-if="primaryHighlight.image"
            >
              <el-image
                :src="primaryHighlight.image"
                :alt="primaryHighlight.title || '展会集锦'"
                :preview-src-list="previewSrcList"
                :initial-index="0"
                fit="contain"
                :z-index="3000"
                preview-teleported
              />
            </div>
            <div class="highlight-info" v-if="hasDesc(primaryHighlight)">
              <h3>{{ primaryHighlight.title }}</h3>
              <div v-html="primaryHighlight.description"></div>
              <div
                class="highlight-meta"
                v-if="primaryHighlight.date || primaryHighlight.category"
              >
                <span class="highlight-date" v-if="primaryHighlight.date">{{
                  primaryHighlight.date
                }}</span>
                <span
                  class="highlight-category"
                  v-if="primaryHighlight.category"
                  >{{ primaryHighlight.category }}</span
                >
              </div>
            </div>
          </div>

          <!-- 缩略图滑动区（其余） -->
          <div v-if="thumbGroups.length > 0" class="highlights-thumbs">
            <el-carousel
              height="150px"
              arrow="always"
              indicator-position="outside"
            >
              <el-carousel-item v-for="(group, gi) in thumbGroups" :key="gi">
                <div class="thumbs-grid">
                  <div
                    class="thumb-item"
                    v-for="(it, idx) in group"
                    :key="it.id || idx"
                  >
                    <el-image
                      v-if="it.image"
                      :src="it.image"
                      :preview-src-list="previewSrcList"
                      :initial-index="getPreviewIndex(it)"
                      fit="cover"
                      :z-index="3000"
                      preview-teleported
                    >
                      <template #error>
                        <div class="thumb-fallback">无图</div>
                      </template>
                    </el-image>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </section>

      <!-- 展馆介绍 -->
      <section
        id="venue-intro"
        class="about-section"
        v-if="venueDescription && activeTab === 'venue-intro'"
      >
        <h2 class="section-title">{{ "展馆介绍" }}</h2>
        <div class="venue-content">
          <div class="venue-info">
            <div v-if="venueDescription" v-html="venueDescription"></div>
            <div class="venue-features">
              <div
                class="feature-item"
                v-for="feature in venueFeatures"
                :key="feature.id"
              >
                <div class="feature-icon">
                  <el-icon
                    ><component :is="getIconComponent(feature.icon)"
                  /></el-icon>
                </div>
                <div class="feature-text">
                  <h4>{{ feature.title }}</h4>
                  <p>{{ feature.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 组织架构 -->
      <section
        id="organization-structure"
        class="about-section"
        v-if="
          organizationStructure.length > 0 &&
          activeTab === 'organization-structure'
        "
      >
        <h2 class="section-title">{{ "组织架构" }}</h2>
        <div class="structure-content">
          <div
            class="structure-item"
            v-for="item in organizationStructure"
            :key="item.id"
          >
            <div class="structure-icon" v-if="!item.image">
              <el-icon><component :is="getIconComponent(item.icon)" /></el-icon>
            </div>
            <div class="structure-image" v-if="item.image">
              <img :src="item.image" :alt="item.title" />
            </div>
            <div class="structure-info">
              <div v-if="item.description" v-html="item.description"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 展品范围 -->
      <section
        id="product-scope"
        class="about-section"
        v-if="productScope.length > 0 && activeTab === 'product-scope'"
      >
        <h2 class="section-title">
          {{ sectionTitleProductScope || "展品范围" }}
        </h2>
        <div class="product-scope">
          <div class="scope-card" v-for="item in productScope" :key="item.id">
            <div class="scope-card-content">
              <div
                v-if="item.description"
                v-html="item.description"
                class="scope-description"
              ></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 往届展会 -->
      <section
        id="past-exhibitions"
        class="about-section"
        v-if="pastExhibitions.length > 0 && activeTab === 'past-exhibitions'"
      >
        <h2 class="section-title">{{ sectionTitlePast || "往届展会" }}</h2>
        <div class="past-exhibitions">
          <div
            class="exhibition-item"
            v-for="exhibition in pastExhibitions"
            :key="exhibition.id"
          >
            <div class="exhibition-image">
              <img :src="exhibition.image" :alt="exhibition.title" />
            </div>
            <div class="exhibition-content">
              <h3>{{ exhibition.title }}</h3>
              <div
                v-if="exhibition.description"
                v-html="exhibition.description"
              ></div>
              <div class="exhibition-stats">
                <span>展商: {{ exhibition.stats.exhibitors }}</span>
                <span>观众: {{ exhibition.stats.visitors }}</span>
                <span>面积: {{ exhibition.stats.area }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  Setting,
  User,
  Tools,
  Grid,
  Connection,
  Star,
  Trophy,
} from "@element-plus/icons-vue";
import { subpageApi } from "@/api/user";

export default {
  name: "About",
  setup() {
    const router = useRouter();

    // 当前激活的tab
    const activeTab = ref("exhibition-intro");

    // 轮播图数据
    const carouselData = ref([]);

    // 设置激活的tab
    const setActiveTab = (tabName) => {
      activeTab.value = tabName;
    };

    // 处理轮播图按钮点击
    const handleCarouselAction = (action) => {
      if (action) {
        // 这里可以根据action进行不同的跳转或操作
        console.log("轮播图按钮点击:", action);
      }
    };

    // 加载轮播图数据
    const loadCarouselData = async () => {
      try {
        const response = await subpageApi.getContentByType("carousel_about");
        if (response && response.code === "200" && response.data) {
          carouselData.value = response.data
            .filter((item) => item.status === "active")
            .map((item) => {
              const content =
                typeof item.content === "string"
                  ? JSON.parse(item.content)
                  : item.content;
              return {
                id: item.id,
                title: item.title,
                subtitle: item.subtitle || "",
                description: content.description || "",
                image: item.imageUrl || content.image || "",
                buttonText: content.buttonText || "",
                action: content.action || "",
              };
            })
            .sort((a, b) => a.sort - b.sort);
        }
      } catch (error) {
        console.error("加载轮播图数据失败:", error);
      }
    };

    // 组织架构数据 - 从后端获取
    const organizationStructure = ref([]);

    // 展品范围数据 - 从后端获取
    const productScope = ref([]);

    // 展会集锦数据 - 从后端获取
    const exhibitionHighlights = ref([]);
    const hasDesc = (h) =>
      !!(h && typeof h.description === "string" && h.description.trim());
    const primaryHighlight = computed(() =>
      exhibitionHighlights.value && exhibitionHighlights.value.length
        ? exhibitionHighlights.value[0]
        : null
    );
    const others = computed(() => (exhibitionHighlights.value || []).slice(1));
    const chunk = (arr, size) => {
      const res = [];
      for (let i = 0; i < arr.length; i += size)
        res.push(arr.slice(i, i + size));
      return res;
    };
    const thumbGroups = computed(() => chunk(others.value, 8));
    const previewSrcList = computed(() =>
      (exhibitionHighlights.value || [])
        .filter((i) => !!i.image)
        .map((i) => i.image)
    );
    const getPreviewIndex = (item) => {
      const list = previewSrcList.value;
      const idx = list.findIndex((u) => u === item.image);
      return idx >= 0 ? idx : 0;
    };

    // 往届展会数据 - 从后端获取
    const pastExhibitions = ref([]);

    // 展会介绍图片 - 从后端获取
    const introImage = ref("");

    // 展会介绍标题 - 从后端获取
    const introTitle = ref("");

    // 展会介绍描述1 - 从后端获取
    const introDescription1 = ref("");

    // 展会介绍描述2 - 从后端获取
    const introDescription2 = ref("");

    // 主办方介绍标题 - 从后端获取
    const organizerTitle = ref("");

    // 主办方介绍描述 - 从后端获取
    const organizerDescription = ref("");

    // 主办方统计数据 - 从后端获取
    const organizerStats = ref({
      experience: 0,
      partners: 0,
      visitors: 0,
    });

    // 展馆介绍数据 - 从后端获取
    const venueTitle = ref("");
    const venueDescription = ref("");
    const venueImage = ref("");
    const venueFeatures = ref([]);

    // 页面标题 - 从后端获取
    const pageTitle = ref("");

    // 页面副标题 - 从后端获取
    const pageSubtitle = ref("");

    // 各区块标题（从后端获取）
    const sectionTitleExhibitionIntro = ref("");
    const sectionTitleOrganizer = ref("");
    const sectionTitleOrganization = ref("");
    const sectionTitleProductScope = ref("");
    const sectionTitleHighlights = ref("");
    const sectionTitleVenue = ref("");
    const sectionTitlePast = ref("");

    // 处理数字列表的换行
    const formatNumberedList = (content) => {
      if (!content) return content;

      // 将数字. 替换为换行+数字.
      return content.replace(/(\d+\.\s)/g, "\n$1");
    };

    // 解析富文本编辑器生成的内容
    const parseContent = (content) => {
      if (!content)
        return {
          content: "",
          subtitle: "",
          backgroundImage: "",
          date: "",
          category: "",
          stats: {},
        };

      try {
        // 尝试解析JSON格式
        if (typeof content === "string" && content.trim().startsWith("{")) {
          const parsed = JSON.parse(content);
          return {
            content: formatNumberedList(parsed.content || ""),
            subtitle: parsed.subtitle || "",
            backgroundImage: parsed.backgroundImage || "",
            date: parsed.date || "",
            category: parsed.category || "",
            stats: parsed.stats || {},
          };
        }
        // 如果是纯文本，直接返回
        return {
          content: formatNumberedList(content),
          subtitle: "",
          backgroundImage: "",
          date: "",
          category: "",
          stats: {},
        };
      } catch (e) {
        // 解析失败，返回原始内容
        return {
          content: formatNumberedList(content),
          subtitle: "",
          backgroundImage: "",
          date: "",
          category: "",
          stats: {},
        };
      }
    };

    // 加载关于我们页面数据
    const loadAboutData = async () => {
      try {
        console.log("开始加载关于我们页面数据...");

        // 使用正确的API获取数据
        const sections = [
          "exhibition-intro",
          "organizer-intro",
          "organization-structure",
          "product-scope",
          "exhibition-highlights",
          "venue-intro",
          "past-exhibitions",
        ];

        for (const sectionKey of sections) {
          try {
            console.log(`加载 ${sectionKey} 数据...`);
            const response = await subpageApi.getSubpageList(
              "about",
              sectionKey
            );
            console.log(`${sectionKey} API响应:`, response);

            if (
              response &&
              response.code === "200" &&
              response.data &&
              Array.isArray(response.data)
            ) {
              const sectionData = response.data;
              console.log(`${sectionKey} 数据:`, sectionData);

              switch (sectionKey) {
                case "exhibition-intro":
                  if (sectionData.length > 0) {
                    const item = sectionData[0];
                    console.log("展会介绍原始数据:", item);
                    const parsed = parseContent(item.content);
                    console.log("展会介绍解析后数据:", parsed);

                    introTitle.value =
                      item.title || "FAIR plus机器人全产业链接会";
                    //introImage.value = item.imageUrl

                    if (parsed.content) {
                      // 直接使用完整的富文本内容，不进行分割
                      introDescription1.value = parsed.content;
                      introDescription2.value = ""; // 不再分割内容
                      console.log("展会介绍内容设置:", {
                        content: parsed.content,
                        length: parsed.content.length,
                      });
                    } else {
                      introDescription1.value =
                        "全产业链召集 全球 500 家机器人精英企业齐聚！从核心零部件（微型驱动系统、AI 芯片等）到整机研发集成，再到检测维保等下游服务，全链条覆盖无死角。";
                      introDescription2.value =
                        "行业巨头坐镇，一场产业链资源对接的盛宴即将开启！";
                      console.log("展会介绍使用默认内容");
                    }
                    sectionTitleExhibitionIntro.value =
                      item.title || "展会介绍";
                  }
                  break;

                case "organizer-intro":
                  if (sectionData.length > 0) {
                    const item = sectionData[0];
                    const parsed = parseContent(item.content);

                    organizerTitle.value = item.title || "主办方介绍";
                    organizerDescription.value =
                      parsed.content ||
                      "我们致力于推动机器人产业的发展，为行业搭建专业的交流平台。";
                    sectionTitleOrganizer.value = item.title || "主办方介绍";
                  }
                  break;

                case "organization-structure":
                  organizationStructure.value = sectionData.map(
                    (item, index) => {
                      const parsed = parseContent(item.content);
                      return {
                        id: item.id || index + 1,
                        icon: "Setting",
                        title: parsed.subtitle || item.title || "组织架构",
                        description: parsed.content || item.content || "",
                        image: parsed.backgroundImage || item.imageUrl || "",
                      };
                    }
                  );
                  sectionTitleOrganization.value =
                    sectionData.length > 0
                      ? sectionData[0].title || "组织架构"
                      : "组织架构";
                  break;

                case "product-scope":
                  productScope.value = sectionData.map((item, index) => {
                    const parsed = parseContent(item.content);
                    // 避免标题重复，如果标题是"展品范围"则使用更具体的标题
                    let title =
                      parsed.subtitle || item.title || `展品类别 ${index + 1}`;
                    if (title === "展品范围") {
                      title = `展品类别 ${index + 1}`;
                    }
                    return {
                      id: item.id || index + 1,
                      title: title,
                      description: parsed.content || item.content || "",
                    };
                  });
                  sectionTitleProductScope.value =
                    sectionData.length > 0
                      ? sectionData[0].title || "展品范围"
                      : "展品范围";
                  break;

                case "exhibition-highlights":
                  exhibitionHighlights.value = sectionData.map(
                    (item, index) => {
                      const parsed = parseContent(item.content);
                      return {
                        id: item.id || index + 1,
                        title: parsed.subtitle || item.title || "展会集锦",
                        description: parsed.content || item.content || "",
                        image: parsed.backgroundImage || item.imageUrl || "",
                        date: parsed.date || "",
                        category: parsed.category || "",
                      };
                    }
                  );
                  sectionTitleHighlights.value =
                    sectionData.length > 0
                      ? sectionData[0].title || "展会集锦"
                      : "展会集锦";
                  break;

                case "venue-intro":
                  if (sectionData.length > 0) {
                    const item = sectionData[0];
                    const parsed = parseContent(item.content);

                    venueTitle.value = item.title || "深圳会展中心";
                    venueImage.value = item.imageUrl;
                    venueDescription.value =
                      parsed.content ||
                      "深圳会展中心位于深圳市中心区，是华南地区规模最大、设施最完善的现代化展馆之一。";
                    sectionTitleVenue.value = item.title || "展馆介绍";
                  }
                  break;

                case "past-exhibitions":
                  pastExhibitions.value = sectionData.map((item, index) => {
                    const parsed = parseContent(item.content);
                    return {
                      id: item.id || index + 1,
                      title: parsed.subtitle || item.title || "往届展会",
                      description: parsed.content || item.content || "",
                      image: parsed.backgroundImage || item.imageUrl || "",
                      stats: parsed.stats || {
                        exhibitors: "",
                        visitors: "",
                        area: "",
                      },
                    };
                  });
                  sectionTitlePast.value =
                    sectionData.length > 0
                      ? sectionData[0].title || "往届展会"
                      : "往届展会";
                  break;
              }
            } else {
              console.log(`${sectionKey} 没有数据或API调用失败`);
            }
          } catch (error) {
            console.error(`加载${sectionKey}数据失败:`, error);
          }
        }

        // 设置页面标题和副标题
        pageTitle.value = "关于我们";
        pageSubtitle.value = "了解FAIR plus机器人全产业链接会的背景和发展历程";

        console.log("关于我们页面数据加载完成");
        console.log("展会介绍:", {
          title: introTitle.value,
          image: introImage.value,
          desc1: introDescription1.value,
          desc2: introDescription2.value,
          desc1Length: introDescription1.value?.length || 0,
        });
      } catch (error) {
        console.error("加载关于我们页面数据失败:", error);
        // 设置默认值
        setDefaultValues();
      }
    };

    // 设置默认值
    const setDefaultValues = () => {
      // 设置默认的展会介绍内容
      introTitle.value = "FAIR plus机器人全产业链接会";
      introDescription1.value =
        "FAIR plus机器人全产业链接会始创于2010年，是华南地区规模最大、影响力最强的机器人产业展览会之一。经过十多年的发展，已成为连接全球机器人产业链的重要平台。";
      introDescription2.value =
        "展会汇聚了来自全球的顶尖机器人企业和创新技术，涵盖智能制造、工业自动化、机器人技术、人工智能等多个领域，为参展商和观众搭建了高效的交流平台。";

      // 设置默认的主办方介绍内容
      organizerTitle.value = "华南工业博览会组委会";
      organizerDescription.value =
        "华南工业博览会组委会是专业的展会组织机构，拥有丰富的展会策划和执行经验。我们致力于为参展商和观众提供最优质的展会服务，推动机器人产业的健康发展。";
      organizerStats.value = {
        experience: "15+",
        partners: "500+",
        visitors: "50,000+",
      };

      // 设置默认图片
      introImage.value = "";

      // 设置默认的展品范围数据
      productScope.value = [
        {
          id: 1,
          icon: "Grid",
          title: "工业机器人",
          description:
            "包括焊接机器人、搬运机器人、装配机器人等各类工业应用机器人",
        },
        {
          id: 2,
          icon: "Connection",
          title: "服务机器人",
          description: "包括医疗机器人、教育机器人、家庭服务机器人等",
        },
        {
          id: 3,
          icon: "Tools",
          title: "机器人核心部件",
          description: "包括减速器、伺服电机、控制器、传感器等关键零部件",
        },
        {
          id: 4,
          icon: "Star",
          title: "智能制造系统",
          description: "包括柔性生产线、智能工厂解决方案、工业4.0技术等",
        },
      ];

      // 设置默认的展会集锦数据
      exhibitionHighlights.value = [
        {
          id: 1,
          title: "FAIR plus 2024盛况回顾",
          description:
            "2024年展会吸引了来自全球的500+展商和50,000+专业观众，展示了最新的机器人技术和应用。",
          image:
            "https://images.pexels.com/photos/3861972/pexels-photo-3861972.jpeg?auto=compress&cs=tinysrgb&w=500&h=400&fit=crop&crop=center",
          date: "2024-05-15",
          category: "展会回顾",
        },
        {
          id: 2,
          title: "FAIR plus 2023精彩瞬间",
          description:
            "2023年展会聚焦智能制造和数字化转型，展示了最新的机器人技术和应用",
          image:
            "https://images.pexels.com/photos/3861972/pexels-photo-3861972.jpeg?auto=compress&cs=tinysrgb&w=500&h=400&fit=crop&crop=center",
          date: "2023-05-10",
          category: "展会集锦",
        },
      ];

      // 设置默认的往届展会数据
      pastExhibitions.value = [
        {
          id: 1,
          title: "FAIR plus 2024",
          description:
            "2024年展会取得了巨大成功，吸引了来自全球的500+展商和50,000+专业观众",
          image:
            "https://images.pexels.com/photos/3861972/pexels-photo-3861972.jpeg?auto=compress&cs=tinysrgb&w=500&h=400&fit=crop&crop=center",
          stats: {
            exhibitors: "500+",
            visitors: "50,000+",
            area: "15,000m²",
          },
        },
        {
          id: 2,
          title: "FAIR plus 2023",
          description:
            "2023年展会聚焦智能制造和数字化转型，展示了最新的机器人技术和应用",
          image:
            "https://images.pexels.com/photos/3861972/pexels-photo-3861972.jpeg?auto=compress&cs=tinysrgb&w=500&h=400&fit=crop&crop=center",
          stats: {
            exhibitors: "450+",
            visitors: "45,000+",
            area: "14,000m²",
          },
        },
      ];
    };

    // 页面加载时获取数据
    onMounted(async () => {
      setDefaultValues(); // 先设置默认值
      await loadAboutData(); // 再加载服务端数据覆盖
      await loadCarouselData(); // 加载轮播图数据
    });

    // 获取图标组件
    const getIconComponent = (iconName) => {
      const iconMap = {
        Setting: Setting,
        User: User,
        Tools: Tools,
        Grid: Grid,
        Connection: Connection,
        Star: Star,
        Trophy: Trophy,
      };
      return iconMap[iconName] || Setting;
    };

    // 查看展会详情
    const viewExhibition = (exhibition) => {
      console.log("查看展会详情:", exhibition.title);
      router.push(`/exhibition-detail?id=${exhibition.id}`);
    };

    return {
      activeTab,
      setActiveTab,
      carouselData,
      handleCarouselAction,
      organizationStructure,
      productScope,
      exhibitionHighlights,
      hasDesc,
      primaryHighlight,
      thumbGroups,
      previewSrcList,
      getPreviewIndex,
      pastExhibitions,
      introImage,
      introTitle,
      introDescription1,
      introDescription2,
      organizerTitle,
      organizerDescription,
      organizerStats,
      venueTitle,
      venueDescription,
      venueImage,
      venueFeatures,
      pageTitle,
      pageSubtitle,
      sectionTitleExhibitionIntro,
      sectionTitleOrganizer,
      sectionTitleOrganization,
      sectionTitleProductScope,
      sectionTitleHighlights,
      sectionTitleVenue,
      sectionTitlePast,
      getIconComponent,
      viewExhibition,
    };
  },
};
</script>

<style scoped>
.about {
  padding-top: 70px;
  min-height: 100vh;
  background: #f8f9fa;
}

:deep(.resizable-image) {
  max-width: 100% !important;
  height: auto !important;
}

/* 顶部静态图片样式 */
.static-banner {
  margin-top: 0;
}
.banner-item {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  padding-top: 130px;
}
.banner-content {
  text-align: left;
  color: #fff;
  max-width: 100%;
}
.banner-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.banner-subtitle {
  font-size: 24px;
  margin-bottom: 15px;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.banner-description {
  font-size: 18px;
  margin-bottom: 30px;
  opacity: 0.8;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.page-header {
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.page-title {
  font-size: 48px;
  margin-bottom: 20px;
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
}

.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
}

.nav-item:hover {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.nav-item.active {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-section {
  background: white;
  margin: 30px 0;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* 展会介绍样式 */
.intro-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.intro-text h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.intro-text p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.intro-image {
  width: 100%;
  max-width: 800px; /* 与文字区域宽度保持一致 */
}

.intro-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.intro-text {
  width: 100%;
  max-width: 800px;
  text-align: left;
}

/* 富文本内图片限制（关于我们各区块） */
.intro-text :deep(img),
.organizer-info :deep(img),
.structure-info :deep(img),
.scope-description :deep(img),
.venue-info :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 主办方介绍样式 */
.organizer-content {
  max-width: 1000px; /* 放宽主办方介绍区域宽度 */
  margin: 0 auto;
}

.organizer-info {
  background: #ffffff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8eaed;
}

.organizer-info h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.organizer-info p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* 组织架构样式 */
.structure-content {
  display: grid;
  grid-template-columns: 1fr; /* 每条全宽展示，避免卡片宽度限制图片 */
  gap: 24px;
}

.structure-item {
  display: flex;
  flex-direction: column; /* 上下结构：图片在上，文本在下 */
  align-items: stretch;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.structure-item:hover {
  transform: translateY(-5px);
}

.structure-icon {
  font-size: 2.5rem;
  color: #667eea;
  flex-shrink: 0;
}

.structure-image {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9; /* 一致的横图比例 */
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.structure-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.structure-info {
  flex: 1;
}

.structure-info h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.structure-info p {
  color: #666;
  line-height: 1.5;
}

/* 组织架构富文本与换行、长文适配 */
.structure-info {
  flex: 1;
  min-width: 0; /* 避免被图片挤压后溢出 */
}

.structure-info :deep(p) {
  margin-bottom: 12px;
  line-height: 1.7;
  color: #555;
  white-space: pre-line; /* 支持纯文本换行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.structure-info :deep(ul),
.structure-info :deep(ol) {
  margin: 8px 0 12px 0;
  padding-left: 22px;
}

.structure-info :deep(li) {
  margin: 6px 0;
  line-height: 1.6;
}

.structure-info :deep(h1),
.structure-info :deep(h2),
.structure-info :deep(h3),
.structure-info :deep(h4),
.structure-info :deep(h5),
.structure-info :deep(h6) {
  margin: 14px 0 8px 0;
  color: #333;
  font-weight: 600;
}

/* 展品范围样式 */
.product-scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.scope-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid #e8eaed;
}

.scope-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.scope-card-content {
  padding: 24px;
}

.scope-description {
  color: #555;
  line-height: 1.7;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 0.95rem;
}

.scope-description h1,
.scope-description h2,
.scope-description h3,
.scope-description h4,
.scope-description h5,
.scope-description h6 {
  margin-top: 20px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #333;
}

.scope-description p {
  margin-bottom: 16px;
  line-height: 1.7;
}

.scope-description ul,
.scope-description ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.scope-description li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.scope-description strong {
  font-weight: 600;
  color: #333;
}

/* 展会集锦样式 */
.highlights-content {
  max-width: 1000px;
  margin: 0 auto;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.highlight-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.highlight-item:hover {
  transform: translateY(-5px);
}

.highlight-image {
  height: 200px;
  overflow: hidden;
}

.highlight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.highlight-image.full-image {
  height: 300px; /* 无文本时放大展示 */
}
.highlight-item.primary .highlight-image {
  height: 360px;
}

.highlights-thumbs {
  margin-top: 20px;
  width: 100%;
  padding: 0;
}

/* 让缩略图区与上方主图保持同等可视宽度 */
.highlights-thumbs :deep(.el-carousel) {
  width: 100%;
}
.highlights-thumbs :deep(.el-carousel__container) {
  width: 100%;
  padding: 0 56px; /* 预留左右箭头空间，避免覆盖缩略图 */
}
.highlights-thumbs :deep(.el-carousel__item) {
  display: flex;
  width: 100%;
}
.thumbs-grid {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 强制8等宽 */
}

/* 让轮播左右切换按钮更明显 */
:deep(.el-carousel__arrow) {
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%);
}

:deep(.el-carousel__arrow:hover) {
  background-color: rgba(102, 126, 234, 0.9);
  border-color: #fff;
}

:deep(.el-carousel__arrow i) {
  font-size: 18px;
}

.thumbs-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  align-items: center;
}

.thumb-item :deep(img),
.thumb-item .el-image__inner {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
}

.thumb-fallback {
  width: 100%;
  height: 120px;
  background: #f0f0f0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.highlight-image.full-image img {
  object-fit: contain; /* 无文本时尽量完整展示图片 */
}

.highlight-item:hover .highlight-image img {
  transform: scale(1.05);
}

.highlight-info {
  padding: 20px;
}

.highlight-info h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.highlight-info p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.highlight-meta {
  display: flex;
  gap: 15px;
}

.highlight-date,
.highlight-category {
  font-size: 0.9rem;
  color: #667eea;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

/* 下载中心样式 */
.download-center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.download-item:hover {
  transform: translateY(-5px);
}

.download-icon {
  font-size: 2.5rem;
  color: #667eea;
  flex-shrink: 0;
}

.download-info {
  flex: 1;
}

.download-info h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.download-info p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 5px;
}

.file-size {
  color: #999;
  font-size: 0.9rem;
}

/* 展馆介绍样式 */
.venue-content {
  display: flex;
  flex-direction: column; /* 文本在上，图片在下 */
  gap: 30px;
  align-items: center;
}

.venue-info h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.venue-info p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 30px;
}

.venue-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
}

.feature-icon {
  font-size: 2.5rem;
  color: #667eea;
  flex-shrink: 0;
}

.feature-text h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.feature-text p {
  color: #666;
  font-size: 0.9rem;
}

.venue-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 往届展会样式 */
.past-exhibitions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.exhibition-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.exhibition-item:hover {
  transform: translateY(-5px);
}

.exhibition-image {
  height: 200px;
  overflow: hidden;
}

.exhibition-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exhibition-content {
  padding: 20px;
}

.exhibition-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.exhibition-content p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.exhibition-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.exhibition-stats span {
  color: #667eea;
  font-size: 0.9rem;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .about-section {
    padding: 20px;
  }

  .intro-content {
    gap: 20px;
  }

  .intro-image {
    max-width: 100%;
  }

  .intro-text {
    max-width: 100%;
  }

  .structure-content,
  .product-scope,
  .download-center,
  .past-exhibitions,
  .highlights-content {
    grid-template-columns: 1fr;
  }

  .product-scope {
    gap: 16px;
  }

  .scope-card-content {
    padding: 20px;
  }

  .download-item {
    flex-direction: column;
    text-align: center;
  }

  .exhibition-stats {
    flex-direction: column;
    gap: 10px;
  }

  .venue-content {
    flex-direction: column;
    gap: 24px;
  }

  .highlights-summary {
    margin-left: 0;
    padding-left: 0;
  }
}
</style>
